<template>
  <div class="rotateCard">
    <!-- trigger：卡片翻转的触发方式，目前有 hover/click/custom(自定义)三种方式。其中custom方式配合v-model使用，使用场景：在卡片内部点击按钮触发时使用。
direction：翻转的方向，目前有row/col两种。
slot：cz/cf 正反两面的插槽 -->
    <rotate3DCard trigger="click" direction="row">
      <!-- <slot name="cz">
        <div>123</div>
      </slot> -->
      <div slot="cz">
        123
      </div>
      <!-- <slot name="cf">
        <div>234</div>
      </slot> -->
      <div slot="cf">
        123
      </div>
    </rotate3DCard>
    <div class="outDiv" ref="outDiv" @click="toggleDiv($event)">
      <div class="front" ref="front">
        123
      </div>
      <div class="back" ref="back">
        465
      </div>
    </div>
    <!-- 洗牌 -->
    <div id="file-demo" class="file">
      <h3>洗牌</h3>
      <span>基于VUE列表的位移过渡效果功能和loadash.js的实例</span>
      <button @click="shuffle">shuffle</button>
      <transition-group name="file" tag="div">
          <li v-for="item in items" v-bind:key="item.id">
            {{ item.number }}
          </li>
      </transition-group>
    </div>
    <div>
      <el-button type="primary" @click="visible = true">子组件改变父组件的值</el-button>
      <son :visible="visible" />
    </div>
    <div>
       <my-tree :list="list"></my-tree>
    </div>
  </div>
</template>

<script>
import myTree from '@/components/common/my-tree'
import rotate3DCard from '@/components/common/rotate3DCard'
import son from '@/components/common/son'
import _ from 'loadsh'
export default {
  components: {
    rotate3DCard,
    son,
    myTree
  },
  data () {
    return {
      isRotate: false,
      visible: false,
      items:Array.apply(null, {length: 81}).map(function(_, index){
                    return {
                        id: index,
                        number: index % 9 + 1
                    }
                }),
      list: [
      {
        "name": "黄焖鸡米饭111111111",
        cList: [
          { "name": "二级黄焖鸡" },
          {
            "name": "one chicken",
            cList: [{ "name": '三级黄焖鸡3333', cList: [{ "name": "四级黄焖鸡" }] }]
          }
        ]
      },
      { "name": "2222222222" },
      {
        "name": "黄焖鸡米饭33333333", cList: [
          { "name": "二级黄焖鸡" },
          { "name": "one chicken" }
        ]
      },
    ]
    }
  },
  methods: {
    toggleDiv (e) {
      e.stopPropagation()
      this.isRotate = !this.isRotate
      this.rotateDiv()
    },
    rotateDiv () {
      this.$refs.outDiv.style.transform = this.isRotate ? 'rotateY(540deg)' : 'rotateY(0deg)'
      // this.$refs.outDiv.style.transform = this.isRotate ? ['rotateX(180deg)'] : ['rotateX(0deg)']
    },
    shuffle () {
      this.items = _.shuffle(this.items)
    }
  }
}
</script>

<style lang="less" scoped>
.outDiv {
  width: 250px;
  height: 400px;
  border: 1px solid skyblue;
  position: relative;
  transition: all 1.5s;
  transform-style: preserve-3d;
  transition-timing-function: ease-out;
  .front, .back {
    width: 100%;
    height: 100%;
    background: springgreen;
    position: absolute;
    backface-visibility: hidden;
    left: 0;
    top: 0;
  }
  .front {
    z-index: 2;
  }
  .back {
    transform: rotateY(180deg);
    background: rebeccapurple;
  }
}
#file-demo {
  background: #ccc;
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 40px;
  overflow: hidden;
  width: 490px;
  }
  #file-demo li{
      list-style: none;
      border: 1px solid #fff;
      float: left;
      width: 50px;
      height: 40px;
      text-align: center;
      line-height: 50px;
      /* margin: 10px; */
      // margin-right: 10px;
      // margin-bottom: 10px;
  }
  .file-move {
      transition: transform 1s;
  }
  .file {
      position: absolute;
      right: 40px;
      top: 80px;
  }
</style>